<template>
  <el-container>
    <el-main class="leftMain">
      <device-tree :show-tabs="false" show-min-type="2" :show-device-index="false" :query-data="queryData" :first-action="false"></device-tree>
    </el-main>
    <el-main class="rightMain">
      <bs-main>
        <device-log-condition slot="header" :query-data="queryData"></device-log-condition>
        <list
          ref="list"
          class="center"
          height="calc(100vh - 220px)"
          :table-tag="tableName"
          :init-headmune-flag="initHeadmuneFlag"
          :list-data="tableData"
          :has-select="false"
          :list-cols="colData"
          :init-cols-props.sync="initColsProps"
          :action-opts="actionOpts"
          @init-table="initTable"
          @sort="handleSort"
          >
          <template slot="levelSlot" slot-scope="{row}">
            {{ row.level | levelFilter(te) }}
          </template>
        </list>
        <pagination slot="footer" :total="pageData.total" :page="pageData.page" :limit="pageData.limit" @pagination="doList"></pagination>
      </bs-main>
    </el-main>
  </el-container>
</template>

<script>
import DeviceTree from '../components/DeviceTree'
import DeviceLogCondition from './components/DeviceLogCondition'
import List from '@/components/List'
import Pagination from '@/components/Pagination'
import DeviceMonitorApi from '@/api/device'
import CommonApi from '@/api/common'

export default {
  data() {
    const headerContextMenus = {
      width: '120px',
      items: [
        'sortUp',
        'sortDown',
        'line',
        'cols'
      ]
    }
    return {
      queryData: {
        // groupId: 0
        queryType:0
      },
      editorForm: {},
      tableData: [],
      actionOpts: {
        show: false
      },
      colData: [
        { label: '时间',  prop:'date',  headerContextMenus, minwidth: 150 },
        { label: 'MAC地址',  prop:'mac', headerContextMenus, minwidth: 150 },
        { label: '终端名称',  prop:'name', headerContextMenus },
        { label: '级别',  prop:'level',slot: true, headerContextMenus },
        { label: '事件',  prop:'event', headerContextMenus }
      ],
      initColsProps: ['date', 'mac', 'name', 'level', 'event'],
      pageData: {
        page: 1,
        total: 0,
        limit: 15
      },
      tableName:'deviceLogTable',
      initHeadmuneFlag: false,
    }
  },

  created() {
    this.$eventBus.$on('doList', this.doList)
  },
  beforeDestroy() {
    this.$eventBus.$off('doList')
  },
  components: {
      DeviceTree,
      DeviceLogCondition,
      List,
      Pagination
  },
  filters: {
    levelFilter(val,te) {
      let msg = ''
      switch(val){
        case '0':
          msg = te('常规')
          break
        case '1':
          msg = te('警告')
          break
        case '2':
          msg = te('错误')
          break
      }
      return msg
    }
  },
  mounted: function () {
    this.$nextTick(function () {
      this.doList()
    })
  },
  methods: {
    initTable(config){
      this.initHeadmuneFlag = true //更改值  触发表头数据重绘
    },
    // 排序
    handleSort(sortInfo) {
      switch(sortInfo.prop) {
        case 'date':
          this.queryData.orderType = 0
          break;
        case 'mac':
          this.queryData.orderType = 1
          break;
        case 'name':
          this.queryData.orderType = 2
          break;
        case 'level':
          this.queryData.orderType = 3
          break;
        case 'message':
          this.queryData.orderType = 4
          break;
        default:
          this.$alert('提示', '系统不支持排序')
          return;
      }
      this.queryData.orderParam = sortInfo.type
      this.doList()
    },
    // 查询列表
    async doList(current) {
      if(current) {
        this.pageData = {
          ...this.pageData,
          ...current
        }
      }
      var queryData = this.$data.queryData
      queryData.current = this.pageData.page
      queryData.size = this.pageData.limit
      var newQueryData = {...queryData}
      if(newQueryData.endDateTime)
      {
        var sub = newQueryData.endDateTime.substr(0,10)
        newQueryData.endDateTime =  this.$moment(this.$moment(queryData.endDateTime).add(1,'day')).format('yyyy-MM-DD 00:00:00');
      }
      if(!newQueryData.startDateTime) delete newQueryData.startDateTime
      if(!newQueryData.endDateTime) delete newQueryData.endDateTime
      const res = await DeviceMonitorApi.loadDeviceLogList(newQueryData)
      if(res) {
        this.tableData = res.records ? res.records : []
        this.pageData.total = Number(res.total? res.total: 0)
      }
    },

    te(arg) {
      const hasKey = this.$te(arg)
      if (hasKey) {
        const result = this.$t(arg)
        return result
      }
      return arg
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tree-node {
    position: relative;
    padding-left: 10px;
}
</style>
